<!-- 添加修改地址 -->
<template>
	<view class="address-wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<!-- 地址定位 -->
			<!-- <view class="location-item u-flex u-row-between u-p-20 u-m-b-20" @tap="getLocation">
				<view class="u-flex">
					<text class="u-iconfont uicon-map-fill" style="#a76f0d;"></text>
					<text>{{ chooseAddress }}</text>
				</view>
				<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
			</view> -->

			<view class="address-box">
				<!-- 地址表单 -->
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="收货人:"
					prop="consignee">
					<u-input placeholder="请填写收货人姓名" v-model="model.consignee" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="手机号:"
					prop="phone">
					<u-input placeholder="请输入收货人手机号" v-model="model.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="所在地区:"
					prop="area_text">
					<u-input type="select" v-model="model.area_text" :select-open="showSelect" placeholder="请选择地区"
						@click="showSelect = true"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="left" label-width="150" label="详细地址:"
					prop="address">
					<u-input border type="textarea" v-model="model.address" placeholder="如道路、门牌号、小区、楼栋号、单元室等" />
				</u-form-item>
			</view>

			<!-- 设置默认 -->
			<view class="default-box u-flex u-row-between">
				<text class="title">设为默认地址</text>
				<u-switch v-model="model.is_default" activeColor="#e9b461" size="40"></u-switch>
			</view>

			<!-- 功能按钮 -->
			<view class="foot_box u-p-30 u-m-t-50 u-flex u-row-around">
				<button v-show="addressId" class=" u-m-20 u-reset-button delete-btn u-flex-1"
					@tap="deleteAddress">删除收货地址</button>
				<button class=" u-m-20 u-reset-button save-btn u-flex-1" @tap="submit">保存收货地址</button>
			</view>
		</u-form>

		<!-- 省市区选择器 -->
		<u-select mode="mutil-column-auto" safe-area-inset-bottom :list="addressAreaList" v-model="showSelect"
			@confirm="regionConfirm"></u-select>
	</view>
</template>

<script>
	import {
		MAP_KEY
	} from '@/env.js';
	import Auth from '@/shopro/permission/index.js';
	export default {
		components: {},
		data() {
			return {
				showSelect: false, //省市区
				addressAreaList: [],
				addressId: 0, //收货地址ID
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '600',
					color: '#595959'
				},
				model: {
					id: 0,
					consignee: '',
					phone: '',
					area_text: '',
					address: '',
					is_default: false,
					latitude: '',
					longitude: ''
				},
				rules: {
					phone: [{
							required: true,
							message: '请输入收货人手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}
					],
					consignee: [{
						required: true,
						message: '请填写收货人姓名',
						trigger: ['change', 'blur']
					}],
					area_text: [{
						required: true,
						message: '请选择地区',
						trigger: ['change', 'blur']
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}]
				},
				errorType: ['message'],
				chooseAddress: '点击选择地理位置' //定位地址
			};
		},
		computed: {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getArea();
			this.addressId = this.$Route.query.id ? this.$Route.query.id : 0;
			uni.setNavigationBarTitle({
				title: this.addressId ? '编辑收货地址' : '添加收货地址'
			});
			this.addressId && this.getAddressInfo();
			// 微信导入
			this.$Route.query.addressData && this.wxAddressInit();
		},
		methods: {
			// 获取省市区
			getArea() {
				this.$http('address.area').then(res => {
					if (res.code === 1) {
						let {
							provinceData,
							cityData,
							areaData
						} = res.data;
						provinceData.forEach((item, index) => {
							this.addressAreaList.push({
								...item,
								children: []
							});
							this.addressAreaList[index].children.push(...cityData[index]);
							this.addressAreaList[index].children.forEach((item1, index1) => {
								item1['children'] = [];
								item1.children.push(...areaData[index][index1]);
							});
						});
					}
				});
			},
			// 微信导入数据格式
			wxAddressInit() {
				let wxAddress = this.$Route.query.addressData; //微信导入
				this.model.id = 0;
				this.model.consignee = wxAddress.userName;
				this.model.phone = wxAddress.telNumber;
				// #ifdef MP-WEIXIN
				this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countyName}`;
				// #endif
				// #ifdef H5
				this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countryName}`;
				// #endif
				this.model.address = wxAddress.detailInfo.replace(/%20/g, '');
				this.model.is_default = false;
			},

			// 确认省市区
			regionConfirm(e) {
				this.model.area_text = `${e[0].label}-${e[1].label}-${e[2].label}`;
			},

			// 获取定位
			async getLocation() {
				let authState = await new Auth('userLocation').check();
				authState &&
					uni.chooseLocation({
						success: res => {
							this.model.latitude = res.latitude;
							this.model.longitude = res.longitude;
							this.getLocationInfo();
						},
						fail: err => {
							console.log(err);
						}
					});
			},

			//逆坐标解析
			async getLocationInfo() {
				this.chooseAddress = '定位中...';
				const [error, res] = await uni.request({
					url: `https://restapi.amap.com/v3/geocode/regeo?location=${this.model.longitude},${this.model.latitude}&key=${MAP_KEY}`
				});
				if (res.data.status === '1') {
					const addressComponent = res.data.regeocode.addressComponent;
					this.chooseAddress = res.data.regeocode.formatted_address;
					this.model.area_text = `${addressComponent.province}-${addressComponent.city.length ? addressComponent.city : addressComponent.province}-${
					addressComponent.district
				}`;
					this.model.address = res.data.regeocode.formatted_address.replace(
						`${addressComponent.province}${addressComponent.city}${addressComponent.district}`, '');
				} else {
					console.log('%c逆地址解析失败，请检查是否在env中配置地图key', 'color:green;background:yellow');
				}
			},

			// 提交
			submit() {
				this.$refs.uForm.validate(valid => {
					valid ? this.editAddress() : console.log('验证失败');
				});
			},

			// 编辑添加地址
			editAddress() {
				let that = this;
				that.$http(
					'address.edit', {
						...that.model,
						id: that.addressId
					},
					'保存中...'
				).then(res => {
					if (res.code === 1) {
						that.$Router.back();
					}
				});
			},

			// 地址信息
			getAddressInfo() {
				const that = this;
				this.$http('address.info', {
					id: that.$Route.query.id
				}).then(res => {
					if (res.code === 1) {
						let addressData = res.data;
						that.addressId = addressData.id;
						that.model.area_text =
							`${addressData.province_name}-${addressData.city_name}-${addressData.area_name}`;
						that.model.is_default = addressData.is_default === '1' ? true : false;
						that.model.address = addressData.address;
						that.model.phone = addressData.phone;
						that.model.consignee = addressData.consignee;
					}
				});
			},

			// 删除收货地址
			deleteAddress() {
				const that = this;
				that.$http(
					'address.del', {
						id: that.addressId
					},
					'删除中...'
				).then(res => {
					if (res.code === 1) {
						that.$Router.back();
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	// 点击定位
	.location-item {
		font-size: 28rpx;
		font-weight: 500;
		background-color: #fff;
		color: rgba(167, 111, 13, 1);
	}

	// 表单
	.address-box {
		background-color: #fff;
		padding: 0 30rpx;
	}

	.address-item {
		height: 96rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
		padding: 0 25rpx;

		.item-title {
			color: #333;
			font-size: 28rpx;
			white-space: nowrap;
		}

		.inp {
			color: #333;
			font-size: 28rpx;
		}
	}

	.area-box {
		min-height: 120rpx;
		padding-bottom: 60rpx;
		background: #fff;
		padding: 30rpx 25rpx;

		.item-title {
			font-size: 28rpx;
			line-height: 28rpx;
			vertical-align: middle;
			white-space: nowrap;
		}

		.area-inp {
			color: #333;
			font-size: 28rpx;
			vertical-align: middle;
			margin-top: 8rpx;
			width: 550rpx;
		}
	}

	.default-box {
		height: 100rpx;
		padding: 0 25rpx;
		background: #fff;
		margin-top: 20rpx;

		.title {
			font-size: 28rpx;
		}

		.switch {
			transform: scale(0.8);
		}
	}

	// 底部按钮
	.foot_box {
		.delete-btn {
			line-height: 70rpx;
			background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			border-radius: 35rpx;
			padding: 0;
			margin-right: 20rpx;
		}

		.save-btn {
			line-height: 70rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 40rpx;
			color: rgba(#fff, 0.9);
		}
	}
</style>
